import React from 'react'
import { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setAge, setName } from '../store/setAction'

export default function Sun() {
  const state = useSelector((state) => {
    return state.user
  })

  // 修改数据需要调用一个dispatch
  const dispatch = useDispatch()

  const [inputValue, setInputValue] = useState('')

  const getInputValue = (e) => {
    const str = e.target.value
    setInputValue(str)
  }

  const clear = () => {
    setInputValue('')
  }
  return (
    <div>
      Sun-{state.name}-{state.age}
      <form>
        <input
          type="text"
          value={inputValue}
          onChange={getInputValue}
          // ref={inputRef}
        />
      </form>
      <button
        onClick={() => {
          dispatch(setName(inputValue))
        }}
      >
        修改名字
      </button>
      <button onClick={clear}>清空</button>
      <button
        onClick={() => {
          dispatch(setAge(25))
        }}
      >
        修改年龄
      </button>
    </div>
  )
}
